const Sidebar = {
    template: `
      <aside
          id="sidebar"
          class="fixed top-0 left-0 h-full w-64 bg-white dark:bg-gray-900 shadow-lg z-40 transform -translate-x-full lg:translate-x-0 transition-transform duration-300"
      >
        <div class="flex flex-col h-full pt-16">
          <div class="px-4 py-6 space-y-1">
            <a
                v-for="item in menuItems"
                :href="item.path"
                :class="{
                'flex items-center px-4 py-3 rounded-lg': true,
                'bg-primary/10 text-primary group transition-all duration-300 hover:bg-primary hover:text-white': isActive(item.path),
                'hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-300 group hover:text-primary':!isActive(item.path)
              }"
            >
              <i :class="item.icon + ' w-5 h-5 mr-3'"></i>
              <span>{{ item.label }}</span>
              <i
                  class="fa fa-chevron-right ml-auto opacity-0 group-hover:opacity-100 transform group-hover:translate-x-1 transition-all"
              ></i>
            </a>
          </div>

          <div
              class="mt-auto p-4 border-t border-gray-200 dark:border-gray-800"
          >
            <div
                class="flex items-center p-3 rounded-lg bg-gray-100 dark:bg-gray-800"
            >
              <div class="flex-shrink-0">
                <img
                    :src="adminAvatar"
                    alt="管理员头像"
                    class="h-10 w-10 rounded-full object-cover"
                />
              </div>
              <div class="ml-3">
                <p class="text-sm font-medium text-gray-700 dark:text-gray-300">
                  {{ adminName }}
                </p>
                <p class="text-xs text-gray-500 dark:text-gray-400">
                  {{ adminEmail }}
                </p>
              </div>
              <button
                  class="ml-auto text-gray-500 hover:text-red-500"
                  @click="logout"
              >
                <i class="fa fa-sign-out-alt"></i>
              </button>
            </div>
          </div>
        </div>
      </aside>
    `,
    data() {
        return {
            menuItems: [
                {path: '/', icon: 'fa fa-tachometer-alt', label: '仪表盘'},
                {path: '/student', icon: 'fa fa-users', label: '学生管理'},
                {path: '/teacher', icon: 'fa fa-chalkboard-teacher', label: '教师管理'},
                {path: '/course', icon: 'fa fa-code', label: '课程管理'},
                {path: '/score', icon: 'fa fa-graduation-cap', label: '成绩管理'},
                {path: '/class', icon: 'fa fa-user-friends', label: '班级管理'},
                {path: '/report', icon: 'fa fa-chart-bar', label: '报表统计'},
                {path: '/setting', icon: 'fa fa-cog', label: '系统设置'}
            ],
            currentPath: window.location.pathname,
            adminAvatar: '/static/img/avatar.png',
            adminName: '管理员',
            adminEmail: 'admin@cs.edu'
        };
    },
    mounted() {
        const userInfo = JSON.parse(sessionStorage.getItem('user-info'))
        if (userInfo) {
            this.adminName = userInfo.username
            this.adminEmail = userInfo.email
        }
    },
    methods: {
        // 判断菜单项是否激活
        isActive(path) {
            return this.currentPath === path;
        },
        logout() {
            window.location.href='/logout'
        }
    }
};

Vue.component('sidebar', Sidebar);